<template>
  <div class="contain">
    <div class="top">
      <span>宝塔镇河妖</span>
      <div class="top-login" @click="login">
        <el-button type="primary">登录 </el-button>
      </div>
    </div>
    <div class="bottom">
      <el-scrollbar>
        <router-view></router-view>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { toRefs } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    //返回一个路由器对象
    let router = useRouter();
    //登录按钮方法
    let login = () => {
      router.push("/main");
    };
    return {
      login,
    };
  },
};
</script>

<style lang="scss" scoped>
.contain {
  background-image: url("../../public/img/背景图片.png");
  width: 100%;
  // padding-top: 60px;
  height: 100%;
  // margin-top: 60px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: fixed;
}
.top {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  height: 60px;
  background-color: black;
  color: red;
  font-size: 20px;
}
.bottom {
  height: calc(100% - 60px);
}
.top-login {
  position: absolute;
  left: 92%;
}


</style>